<!--
 * @description 签到组件
 * @date 2022/11/12
 -->
<template>
  <div class="sign-in-comp" :style="{ 'margin-top': top }">
    <div class="t-score din-front">{{ signInfo.totalPoints||'0' }}</div>
    <div class="t-score-title">我的积分</div>
    <div class="t-sign-main">
      <div class="t-sign-box">
        <div class="sign-title">
          <div class="main-title">已连续签到<span class="num">{{ signInfo.signNum||'0' }}</span>天 </div>
          <div class="sub-title">{{ signInfo.remark||'' }}</div>
        </div>
        <div class="sign-gold">
          <div v-for="(item,i) in signInfo.signInfo" :key="i" class="gold-item">
            <div class="item-pic">
              <div v-if="item.isSign===true" class="pic">
                <img src="./images/gold.png" alt="">
              </div>
              <div class="line" :class="{sign:item.next===true}" />
            </div>
            <div class="item-text">
              +{{ item.points }}
            </div>
          </div>
        </div>
        <div class="sign-btn">{{ signInfo.isSign===true?'已签到':'签到' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/components/CustomPage/apps/widget/mixins'

export default {
  name: 'SignInComp',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      signInfo: ''
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    }
  },
  methods: {
    setData(result) {
      this.signInfo = result.signInfo.data || {}
    },
    signUp() {
      return
      if (this.signInfo.isSign === true) {
        return false
      }
      this.$dialog.loading.open('签到中...')
      this.$axios.get(url.signUp).then(res => {
        this.$dialog.loading.close()
        if (res.code && res.code === '200') {
          this.$dialog.toast({
            mes: '签到成功',
            timeout: 1500,
            callback: () => {
              this.initData()
            }
          })
        } else {
          this.$dialog.loading.close()
          this.$dialog.toast({
            mes: res.msg || '',
            timeout: 1500
          })
        }
      }).catch(() => {
        this.$dialog.loading.close()
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.sign-in-comp{
  padding-top: rem(88);
  @include bg-image('./', '/bgi.png');
  background-size: 100% rem(406);
  background-position: top;
  position: relative;

  .t-score{
    padding-top: rem(51);
    font-size: rem(52);
    font-weight: 700;
    text-align: center;
    color: #ffffff;
  }

  .t-score-title{
    margin-top: rem(36);
    font-size: rem(30);
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
  }
  .t-sign-main{
    margin-top: rem(60);
    height: rem(318);
    .t-sign-box{
      width: rem(702);
      height: rem(318);
      background: #ffffff;
      border-radius: rem(20);
      margin: rem(42) auto rem(24);
      padding: rem(23) rem(15);
      .sign-title{
        display: flex;
        justify-content: space-between;
        .main-title{
          margin-left: rem(15);
          font-size: rem(36);
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          text-align: left;
          color: #323332;
          .num{
            font-size: rem(50);
            @include font-color($mainColor);
          }
        }
        .sub-title{
          margin-top: rem(13);
          opacity: 0.2;
          font-size: rem(26);
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: bold;
          text-align: right;
          color: #000000;
          letter-spacing: rem(1.3);
          text-shadow: rem(-1) rem(0) rem(2) rem(1) rgba(255,84,0,0.20);
        }
      }
      .sign-gold{
        margin-top: rem(14);
        height: rem(106);
        display: flex;
        .gold-item{
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          .item-pic{
            height: rem(70);
            display: flex;
            align-items: center;
            width: 100%;
            .pic{
              width: rem(70);
              height: rem(70);
              >img{
                width: 100%;
                height: 100%;
              }
            }
            .line{
              flex: 1;
              height: rem(4);
              background: #F2F0F0;
              &.sign{
                background: #fff4c0;
              }
            }
          }
          .item-text{
            opacity: 0.8;
            font-size: rem(24);
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            padding-left: rem(20);
            color: #333333;
          }

        }
      }
      .sign-btn{
        margin: rem(25) auto 0;
        width: rem(320);
        height: rem(68);
        @include bg-color($mainColor);
        border-radius: rem(34);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: rem(30);
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #ffffff;
      }
    }
  }
}
</style>
